<div class="modal-header">
  <div class="modal-title">店铺主机状态</div>
</div>
<nz-tabset>
  <nz-tab nzTitle="主机详细状态">
    <div sv-container>
      <sv-title>
        <ng-container>
          <div nz-col [nzSpan]="100" style="text-align: left; margin-left: 10px; float: left">
            <span>主机IP： {{ i['host_ip'] }}</span>
            <span style="margin-left: 15px">店铺账号： {{ i['account_username'] }}</span>
          </div>
          <div nz-col [nzSpan]="100" style="text-align: right; margin-right: 10px; float: right">
            <a nz-button class="mx-sm" (click)="hostReboot(i['host_ip'])">重启主机</a>
          </div>
        </ng-container>
      </sv-title>
    </div>

    <ng-container>
      <div sv-container>
        <sv-title>&nbsp;</sv-title>
      </div>
      <nz-table
        #hostStatesTable
        [nzData]="listOfData"
        nzSize="default"
        nzShowPagination
        [nzLoading]="loading"
        [nzTotal]="total"
        [nzPageSize]="ps"
        [nzPageIndex]="pi"
        [nzFrontPagination]="true"
        [nzShowTotal]="totalTemplate"
      >
        <thead>
          <tr>
            <th nzAlign="center">主机IP</th>
            <th nzAlign="center">店铺用户名</th>
            <th nzAlign="center" style="display: none">标志位</th>
            <th nzAlign="center" style="display: none">标志值</th>
            <th nzAlign="center">更新时间</th>
            <th nzAlign="center">标志值描述</th>
            <th nzAlign="center">补充信息</th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let data of hostStatesTable.data">
            <tr>
              <td class="text-center">
                <p>{{ data['host_ip'] }}</p>
              </td>
              <td class="text-center">
                <p>{{ data['account_username'] }}</p>
              </td>
              <td class="text-center" style="display: none">
                <p>{{ data['state_flag'] }}</p>
              </td>
              <td class="text-center" style="display: none">
                <p>{{ data['state_value'] }}</p>
              </td>
              <td class="text-center">
                <p>{{ data['UpdatedAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</p>
              </td>
              <td class="text-center {{ getStateColor(data['state_value']) }}">
                <p>{{ data['value_note'] }}</p>
              </td>
              <td class="text-center">
                <p>{{ data['extend_value'] }}</p>
              </td>
            </tr>
          </ng-container>
        </tbody>
      </nz-table>
      <ng-template #totalTemplate let-total> 共 {{ total }} 条 </ng-template>
    </ng-container>
  </nz-tab>
</nz-tabset>

<div class="modal-footer">
  <button nz-button type="button" (click)="close()">关闭</button>
</div>
